<template>
	<view class="template-details tn-safe-area-inset-bottom">
		<view class="">
			<!-- 图文信息 -->
			<view class="dd-glass">
				<view class="reserve-content tn-padding tn-color-black tn-text-lg">
					<view class="tn-text-center tn-text-bold">
						已收到{{total}}个祝福
					</view>
				</view>
			</view>

			<!-- 按钮-->
			<view class="tn-flex tn-flex-row-between" style="margin: 40rpx 0 60rpx 0;">
				<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold @click="zhufu()"
						v-if="zf">
						<text class="tn-icon-like-lack tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">祝 福</text>
					</tn-button>
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold plain disabled
						v-else>
						<text class="tn-icon-like-lack tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">已 祝 福</text>
					</tn-button>
				</view>
				<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
					<tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold
						open-type="share">
						<text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">分 享</text>
					</tn-button>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="tn-margin" style="padding-bottom: 120rpx;">
			<view v-for="(item,index) in bless" :key="index">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="logo-pic tn-shadow">
								<view class="logo-image">
									<view class="tn-shadow-blur"
										:style="'background-image:url('+ item.avatar +');width: 60rpx;height: 60rpx;background-size: cover;'">
									</view>
								</view>
							</view>
							<view class="tn-padding-right tn-padding-left-sm">
								<view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">
									{{item.nickName}}
								</view>
								<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray">
									{{item.createTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray"
						@click="zan(item.id)">
						<view class="tn-text-center">
							<text class="tn-icon-like-lack tn-padding-xs"></text>
						</view>
						<view class="tn-text-center">
							<text class="tn-text-xs">{{item.zan}}</text>
						</view>
					</view>
				</view>

				<view class="" style="margin: 20rpx 30rpx 30rpx 80rpx;">
					<rich-text :nodes="item.content"></rich-text>
				</view>
			</view>
			<tn-load-more :status="loadStatus"></tn-load-more>
		</view>

		<backTop :scrollTop="scrollTop" bottom="80"></backTop>


		<view class="tabbar footerfixed dd-glass">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-margin-top">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center">

						<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-right tn-padding-left-sm">
							<view class="avatar-all">
								<tn-avatar class="tn-shadow-blur" :src="nowLogo"></tn-avatar>
							</view>
						</view>


						<view
							class="topic__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center">
							<view class="topic__info__item__input__left-icon">
								<view class="tn-icon-emoji-good"></view>
							</view>
							<view class="topic__info__item__input__content">
								<input placeholder-class="input-placeholder" v-model="content"
									placeholder="不说点啥子吗？" />
							</view>
						</view>
					</view>
				</view>
				<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-margin-right">
					<view class="topic__info__item__sure">
						<view class="tn-flex-1 justify-content-item tn-text-center">
							<tn-button shape="round" backgroundColor="tn-cool-bg-color-15--reverse" width="100%" shadow
								@click="fasong()">
								<text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
									发 送
								</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
		<tn-toast ref="toast"></tn-toast>
		<zero-loading type="love" v-if="loading"></zero-loading>
	</view>
</template>

<script>
	import template_page_mixin from '@/uni_modules/tuniao-ui/libs/mixin/template_page_mixin.js';
	import WxUserInfoModal from '@/uni_modules/tuniao-ui/components/tuniao-wx-user-info/tuniaoui-wx-user-info.vue'
	import backTop from '@/components/back-top.vue';
	import {
		setToken
	} from '@/utils/auth'
	import {
		listWeddingBless,
		exitsBlessByUserId,
		addWeddingBless,
		dianzanWeddingBless
	} from "@/api/common/api";
	export default {
		name: 'bless',
		mixins: [template_page_mixin],
		components: {
			backTop,
			WxUserInfoModal
		},
		data() {
			return {
				scrollTop: 0,
				loadStatus: 'loadmore',
				bless: [],
				showAuthorizationModal: false,
				nowLogo: this.$store.state.user.avatar,
				nowNickName: this.$store.state.user.nickname,
				token: this.$store.state.user.token,
				userId: this.$store.state.user.userId,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				loginForm: {
					code: '',
					nickName: '',
					avatarUrl: ''
				},
				zf: true,
				content: '',
				total: 0,
				loading: false,
				action: undefined
			}
		},
		onLoad() {
			this.init()
			if (this.userId != '') {
				this.exitsBless()
			}
		},
		onReachBottom() {
			if (this.loadStatus != 'normal') {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				this.init();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 打开获取用户信息弹框
			openAuthorizationModal(action) {
				this.action=action;
				this.showAuthorizationModal = true
			},

			// 获取到的用户信息
			updatedUserInfoEvent(info) {
				const that=this;
				console.log('获取到的用户信息', info)
				let loginCode = that.getLoginCode();
				loginCode.then(code => {
						return code;
					}).then(logCode => {
						that.loginForm.code = logCode.code;
						that.loginForm.avatarUrl = info.avatar;
						that.loginForm.nickName = info.nickname;
						that.loading = true;
						that.$store.dispatch('WXLogin', that.loginForm).then(response => {
							that.token=response.data.token;
							// 设置用户信息
							that.$store.dispatch('GetInfo').then(res => {
								that.nowLogo=res.data.user.avatar
								that.nowNickName=res.data.user.nickName
								that.userId=res.data.user.userId
							})
							setTimeout(() => that.shuaxin(), 1 * 1000)
							that.showAuthorizationModal = false
						})
					}).catch(err => {
						console.log('userProfile-err', err);
					});
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			init() {
				this.loading = true;
				listWeddingBless(this.queryParams).then(response => {
					if (response.rows.length > 0) {
						response.rows.forEach(item => {
							this.bless.push(item)
						})
					} else {
						this.loadStatus = 'nomore'
					}
					this.loading = false;
					this.total = response.total
				});
			},
			flush() {
				this.queryParams.pageNum = 1;
				this.loading = true;
				listWeddingBless(this.queryParams).then(response => {
					this.bless = response.rows;
					this.total = response.total;
					this.loading = false;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				});
			},
			zhufu() {
				if (!this.token) {
					this.openAuthorizationModal(1);
				} else {
					const data = {
						userId: this.userId,
						content: this.nowNickName + "祝你们新婚快乐",
						zan: 0
					}
					addWeddingBless(data).then(res => {
						if (res.code == 200) {
							this.$refs.toast.show({
								title: '祝福成功',
								content: '非常感谢你的祝福，我们会珍惜彼此的爱情。',
								icon: 'success',
								duration: 2000
							})
							this.flush();
							this.zf = false;
						}
					})
				}
			},
			fasong() {
				if (!this.token) {
					this.openAuthorizationModal(2);
				} else {
					if (!this.content) {
						this.$refs.toast.show({
							title: '祝福失败',
							content: '说点啥在提交呗',
							icon: 'error',
							duration: 1500
						})
					} else {
						const data = {
							userId: this.userId,
							content: this.content,
							zan: 0
						}
						addWeddingBless(data).then(res => {
							if (res.code == 200) {
								this.$refs.toast.show({
									title: '祝福成功',
									content: '非常感谢你的祝福，我们会珍惜彼此的爱情。',
									icon: 'success',
									duration: 2000
								})
								this.content = "";
								this.flush();
								this.zf = false;
							}
						})
					}
				}
			},
			// 获取code
			getLoginCode() {
				var that = this;
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: loginRes => {
							console.log('loginRes', loginRes);
							resolve(loginRes);
						}
					});
				});
			},
			exitsBless() {
				exitsBlessByUserId(this.userId).then(res => {
					if (res.msg == "0") {
						this.zf = true
					} else {
						this.zf = false;
					}
				})
			},
			zan(id) {
				const data = {
					id: id,
					userId: this.userId
				}
				dianzanWeddingBless(data).then(res => {
					this.$refs.toast.show({
						title: '点赞成功',
						icon: 'success',
						duration: 1500
					})

					this.flush()
				})
			},
			shuaxin(){
				if(this.action==1){
					this.zhufu()
				}else{
					this.fasong()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 头像 start */
	.logo-image {
		width: 60rpx;
		height: 60rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}


	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		align-items: center;
		min-height: 130rpx;
		padding: 0;
		// height: calc(130rpx + env(safe-area-inset-bottom) / 2);
		// padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	/* 头像*/
	.avatar-all {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.05);
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	/* 内容*/
	.topic {
		position: relative;
		height: 100%;
		z-index: 1;
		margin-bottom: 120rpx;


		/* 表单信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					// width: 400rpx;
					height: 60rpx;
					border: 1rpx solid #C6D1D8;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						margin-right: 5rpx;
						color: #C6D1D8;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 30rpx;
							color: #78909C;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 34rpx;
						margin-right: 20rpx;
						color: #78909C;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					width: 100%;
					height: 60rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					// text-indent: 1em;
					border-radius: 100rpx;
					color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__sure {
					height: 60rpx;
					width: 140rpx;
				}

			}
		}

		/* 表单信息 end */

		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 30rpx;
		color: #C6D1D8;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
</style>
